<template>
  <div class="layout_setting">
    <div class="row" @click.stop="toEditPassword()">
      <div class="left">
        <span>修改登录密码</span>
      </div>

      <div class="right">
        <Icon type="ios-arrow-right" class="select-icon" size="22" color="#979797"></Icon>&nbsp;
      </div>
    </div>

    <div class="row">
      <div class="left">
        <span>当前版本</span>
      </div>
      <div class="right">
        <span>1.8.9</span>
      </div>
    </div>

    <div class="my-button">
      <Button @click.stop="exit()">退出登录</Button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {},
  components: {},
  props: {},
  watch: {},
  computed: {},
  methods: {
    exit: function() {
      this.$router.push("/login");
      return false;
    },

    toEditPassword: function() {
      this.$router.push("/editPassword");
      return false;
    }
  }
};
</script>
<style lang="less" scoped>
.layout_setting {
  width: 100%;
  height: 100%;
  overflow: auto;
  font-size: 17px;
  color: #666;
  margin: 0 auto;

  .row {
    margin: 0px 3%;
    border-bottom: 1px solid hsla(0, 0%, 80%, 0.2999);
    font-size: 18px;
    line-height: 50px;

    display: flex;
    justify-content: space-between;
    padding-left: 0px;

    span {
      font-weight: 500;
    }

    .ivu-icon {
      font-weight: 500;
    }
  }

  button {
    height: 48px;
    border-radius: 24px;
    background: -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(#ffdddd),
      to(#ff83a6)
    );
    background: -webkit-linear-gradient(top, #ffdddd, #ff83a6);
    background: linear-gradient(180deg, #ffdddd, #ff83a6);
    color: #fff;
    font-size: 20px;
    width: 70%;
    margin: 45px 15%;
  }

  .my-button {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 12%;
  }
}
</style>
